<template>
    <section class="scape">
        <h3 class="one">一等奖 &#128693; &#128695; &#128640; &#128640; &#128641; &#128644; </h3>
        <canvas ref="cav" class="border cav"></canvas>
    </section>
</template>

<script>

    /**
     *@Description:刮刮乐
     *@author ZY
     *@date 2022/11/20 21:38
     */
    export default {
        name: "canvas-scrape",
        data() {
            return {
                mouseType: false,
                lx: 0,
                ly: 0
            }
        },
        mounted() {
            this.main()

        },
        methods: {
            main() {
                let cavCanvas = this.$refs.cav
                cavCanvas.width = 400
                cavCanvas.height = 150
                let ctx = cavCanvas.getContext('2d')
                this.drawScape(ctx, cavCanvas)

            },

            drawScape(ctx, cavCanvas) {
                let that = this
                let img = new Image()
                img.src = 'https://images.pexels.com/photos/14518598/pexels-photo-14518598.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load'
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, 400, 150)
                    ctx.globalCompositeOperation = 'destination-out'

                    cavCanvas.addEventListener('mousedown', function (e) {
                        that.mouseType = true
                        that.lx = e.offsetX
                        that.ly = e.offsetY
                    })
                    cavCanvas.addEventListener('mouseup', function (e) {
                        that.mouseType = false
                        // that.calcArea(ctx, cavCanvas)
                    })
                    cavCanvas.addEventListener('mousemove', function (e) {
                        if (that.mouseType) {
                            ctx.beginPath();
                            ctx.moveTo(that.lx, that.ly);
                            ctx.lineTo(e.offsetX, e.offsetY);
                            ctx.lineCap = "round";　　 //设置线条两端为圆弧
                            ctx.lineJoin = "round";　　 //设置线条转折为圆弧
                            ctx.lineWidth = 30;
                            ctx.stroke();
                            ctx.closePath();

                            //更新坐标
                            that.lx = e.offsetX;
                            that.ly = e.offsetY;
                        }

                    })
                }
            },

            calcArea(ctx, cavCanvas) {
                // 获取像素点的数据
                const myImg = ctx.getImageData(0, 0, cavCanvas.width, cavCanvas.height);
                let num = 0;
                const max = myImg.data.length / 4; // 取1/4计算区域比例即可，节省计算开销
                for (let i = 0; i < myImg.data.length; i += 4) {
                    if (myImg.data[i + 3] === 0) {
                        num++;
                    }
                }
                // 0 - 1 为区域百分比，此时80%时清空全部蒙层
                if (num >= max * 0.8) {
                    cavCanvas.remove()
                }
            },


        }
    }
</script>

<style lang="scss" scoped>
    .scape {
        height: 200px;
        position: relative;
        overflow: auto;
        user-select: none;

    }

    .border {
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        overflow: hidden;
    }

    .one {
        left: 100px;
        top: 40px;
        position: absolute;
    }

    .cav {
        position: absolute;
        left: 0;
        top: 0;
    }

</style>
